<template>
	<view class="message tn-safe-area-inset-bottom">
		<tn-nav-bar fixed alpha customBack>
		<view slot="back" class='tn-custom-nav-bar__back'
		  @click="goBack">
		  <text class='icon tn-icon-left-arrow'></text>
		</view>
		  <view class="tn-flex tn-flex-col-center tn-flex-row-center ">
			  详情说明
		  </view>
		</tn-nav-bar>
   

    
    <view class="tn-margin-top-sm tn-padding-bottom-lg">
      
      <view class="" :style="{paddingTop: vuex_custom_bar_height + 'px'}" >
        <view>
          <view class="tn-flex tn-flex-col-top tn-margin tn-cat-shadow tn-padding">
            <view class="tn-padding-left-sm" style="width: 100%;">
              <view class="tn-flex tn-flex-row-between tn-flex-col-between">
                <view class="justify-content-item">
                  <text class="tn-color-blue tn-text-lg tn-text-bold">{{product.title}}</text> <br/>
				  <text class="tn-color-blue tn-text-xs tn-text-bold">额度取决于你的抵货物价值</text>
                </view>
               <view class="justify-content-item tn-icon-honor-fill tn-color-red">
                  热门
                </view>
              </view>
			  <view class="tn-padding-top-lg tn-text-left tn-color-gray">
			    <text class="tn-icon-time tn-padding-right-xs tn-text-df"></text>
			    <text class="tn-text-xs">最高可申请额度</text>
			  </view>
              <view class="tn-padding-top-xs  tn-text-ellipsis-2">
                <text class="tn-color-blue tn-text-xl-xxl tn-text-bold">{{product.maxAmount}}</text>
				<text class="tn-color-blue tn-text-xl tn-text-bold">元</text>
              </view>
              <view class="tn-flex tn-flex-row-between tn-flex-col-between tn-margin-top-sm">
                <view class="justify-content-item tn-text-xs tn-bg-blue--light " style="padding: 5rpx 15rpx;">
                  <text class="tn-padding-right-xs tn-color-bluepurple tn-text-bold">日利率{{product.dayRate}}%起|期限最长{{product.maxMonth}}个月</text>
                </view>
              </view>
			  <view class="justify-content-item tn-text-center tn-margin-top-sm">
				<tn-button width="100%" size="sm" backgroundColor="#3668FC" class="tn-round" shadow @click="apply()">
				  <text class="tn-color-white tn-text-sm" >立即申请</text>
				</tn-button>
			  </view>
			  <view class="justify-content-item tn-color-gray tn-text-left tn-color-gray">
			    <text class="tn-icon-time tn-padding-right-xs tn-text-df"></text>
			    <text class="tn-text-xs">日利率按照单利计算，不存在与贷款直接相关的任何费用。</text>
			  </view>
            </view>
          </view>
        </view>
      </view>
      
      <view class="tn-flex tn-flex-col-top tn-margin tn-cat-shadow tn-padding">
        <view class="tn-padding-left-sm" style="width: 100%;">
		  <view class="justify-content-item tn-text-center">
		    <text class="tn-color-blue tn-text-lg tn-text-bold">// 办理条件 \\</text>
		  </view>
<!--          <view class=" tn-padding-top-xs  tn-text-ellipsis-2">
            <text class="tn-color-gray">提现规则是T+1，即收到的款项将再T+1天内自动到账</text>
          </view> -->
          <view class="tn-flex tn-flex-row-between tn-flex-col-between tn-margin-top-sm">
            <view class="justify-content-item tn-text-left">
              <text class="tn-icon-time tn-padding-right-xs tn-text-df"></text>
              <text class="tn-text-sm">工商登记注册且正常经营的企业或个体工商户；</text>
            </view>
          </view>
		  <view class="tn-flex tn-flex-row-between tn-flex-col-between tn-margin-top-sm">
		    <view class="justify-content-item tn-text-left ">
		      <text class="tn-icon-time tn-padding-right-xs tn-text-df"></text>
		      <text class="tn-text-sm">企业和企业主信用良好；</text>
		    </view>
		  </view>
		  <view class="tn-flex tn-flex-row-between tn-flex-col-between tn-margin-top-sm">
		    <view class="justify-content-item  tn-text-left ">
		      <text class="tn-icon-time tn-padding-right-xs tn-text-df"></text>
		      <text class="tn-text-sm">入驻本平台的企业用户，申请贷款前需要在平台注册账户授权；</text>
		    </view>
		  </view>
        </view>
      </view>
      
	  <view class="tn-flex tn-flex-col-top tn-margin tn-cat-shadow tn-padding">
	    <view class="tn-padding-left-sm" style="width: 100%;">
	  		  <view class="justify-content-item tn-text-center">
	  		    <text class="tn-color-blue tn-text-lg tn-text-bold">// 办理特点 \\</text>
	  		  </view>
<!-- 	      <view class=" tn-padding-top-xs  tn-text-ellipsis-2">
	        <text class="tn-color-gray">提现规则是T+1，即收到的款项将再T+1天内自动到账</text>
	      </view> -->
	      <view class="tn-flex tn-flex-row-between tn-flex-col-between tn-margin-top-sm">
	        <view class="justify-content-item tn-text-left">
	          <text class="tn-icon-time tn-padding-right-xs tn-text-df"></text>
	          <text class="tn-text-sm">货物抵押轻松获取贷款额度；</text>
	        </view>
	      </view>
	  		  <view class="tn-flex tn-flex-row-between tn-flex-col-between tn-margin-top-sm">
	  		    <view class="justify-content-item tn-text-left ">
	  		      <text class="tn-icon-time tn-padding-right-xs tn-text-df"></text>
	  		      <text class="tn-text-sm">放款速度快，最快当天放款；</text>
	  		    </view>
	  		  </view>
	  		  <view class="tn-flex tn-flex-row-between tn-flex-col-between tn-margin-top-sm">
	  		    <view class="justify-content-item  tn-text-left ">
	  		      <text class="tn-icon-time tn-padding-right-xs tn-text-df"></text>
	  		      <text class="tn-text-sm">货物管理，贷款合同，还款明细在线管理；</text>
	  		    </view>
	  		  </view>
	    </view>
	  </view>
	  
	  <view class="tn-flex tn-flex-col-top tn-margin tn-cat-shadow tn-padding">
	    <view class="tn-padding-left-sm" style="width: 100%;">
	  		  <view class="justify-content-item tn-text-center">
	  		    <text class="tn-color-blue tn-text-lg tn-text-bold">// 平台简介 \\</text>
	  		  </view>
<!-- 	      <view class=" tn-padding-top-xs  tn-text-ellipsis-2">
	        <text class="tn-color-gray">提现规则是T+1，即收到的款项将再T+1天内自动到账</text>
	      </view> -->
	      <view class="tn-flex tn-flex-row-between tn-flex-col-between tn-margin-top-sm">
	        <view class="justify-content-item tn-text-left">
	          <text class="tn-icon-time tn-padding-right-xs tn-text-df"></text>
	          <text class="tn-text-sm">数字化的仓库管理体系，保证您的货物安全；</text>
	        </view>
	      </view>
	  		  <view class="tn-flex tn-flex-row-between tn-flex-col-between tn-margin-top-sm">
	  		    <view class="justify-content-item tn-text-left ">
	  		      <text class="tn-icon-time tn-padding-right-xs tn-text-df"></text>
	  		      <text class="tn-text-sm">严格的风控体系保证资金安全；</text>
	  		    </view>
	  		  </view>
	  		  <view class="tn-flex tn-flex-row-between tn-flex-col-between tn-margin-top-sm">
	  		    <view class="justify-content-item  tn-text-left ">
	  		      <text class="tn-icon-time tn-padding-right-xs tn-text-df"></text>
	  		      <text class="tn-text-sm">完善的服务体系，带给您良好资金使用体验；</text>
	  		    </view>
	  		  </view>
			  <view class="tn-flex tn-flex-row-between tn-flex-col-between tn-margin-top-sm">
			    <view class="justify-content-item  tn-text-left ">
			      <text class="tn-icon-time tn-padding-right-xs tn-text-df"></text>
			      <text class="tn-text-sm">优良客户资源，帮助您快速达成交易；</text>
			    </view>
			  </view>
	    </view>
	  </view>
	  
	  <view class="tn-flex tn-flex-col-top tn-margin tn-cat-shadow tn-padding">
	    <view class="tn-padding-left-sm" style="width: 100%;">
	  		  <view class="justify-content-item tn-text-center">
	  		    <text class="tn-color-blue tn-text-lg tn-text-bold">// 其他 \\</text>
	  		  </view>
<!-- 	      <view class=" tn-padding-top-xs  tn-text-ellipsis-2">
	        <text class="tn-color-gray">提现规则是T+1，即收到的款项将再T+1天内自动到账</text>
	      </view> -->
	      <view class="tn-flex tn-flex-row-between tn-flex-col-between tn-margin-top-sm">
	        <view class="justify-content-item tn-text-left">
	          <text class="tn-icon-time tn-padding-right-xs tn-text-df"></text>
	          <text class="tn-text-sm">如出现贷款逾期，平台有权收取罚息，并采取冻结、催收等措施；</text>
	        </view>
	      </view>
	  		  <view class="tn-flex tn-flex-row-between tn-flex-col-between tn-margin-top-sm">
	  		    <view class="justify-content-item tn-text-left ">
	  		      <text class="tn-icon-time tn-padding-right-xs tn-text-df"></text>
	  		      <text class="tn-text-sm">如借款人违反合同约定、违法法定义务、表明不履行合同义务，平台有权采取体停止发放贷款、补充贷款发放
				  和支付条件、变更贷款支付方式等救济措施；</text>
	  		    </view>
	  		  </view>
	  		  <view class="tn-flex tn-flex-row-between tn-flex-col-between tn-margin-top-sm">
	  		    <view class="justify-content-item  tn-text-left ">
	  		      <text class="tn-icon-time tn-padding-right-xs tn-text-df"></text>
	  		      <text class="tn-text-sm">人工咨询及投诉渠道：95533；</text>
	  		    </view>
	  		  </view>
	    </view>
	  </view>
      
    </view>
    
    <view class="tn-tabbar-height"></view>
    
	</view>
</template>

<script>
	import templatePageMixin from '@/libs/mixin/template_page_mixin.js'
	import {getUserStatus} from '@/api/auth.js'
	export default {
    name: 'Message',
		mixins: [templatePageMixin],
		data() {
			return {
				product:{
					
				}
			}
		},
		onLoad(options) {
			this.product.id=options.id
			this.product.title=options.title
			this.product.subtitle=options.subtitle
			this.product.maxAmount=options.maxAmount
			this.product.maxMonth=options.maxMonth
			this.product.dayRate=options.dayRate
		},
		methods: {
			apply(){
				getUserStatus().then(res=>{
				  if(res.realName==false){
					  this.$t.message.toast('请先实名认证')
				  }else if(res.realEnterprise==false){
					  this.$t.message.toast('请先认证公司')
				  }else if(res.haveAmount==false){
					  this.$t.message.toast('请先评估贷款额度')
				  }else{
					 this.tn('/pages/loan/apply') 
				  }
				})
			},
		  // 跳转
		  tn(e) {
			uni.navigateTo({
			  url: e,
			});
		  },
		}
	}
</script>

<style lang="scss" scoped>
	.message{
	  max-height: 100vh;
	}
  
  /* 自定义导航栏内容 start */
  .custom-nav {
    height: 100%;
    
    &__back {
      margin: auto 5rpx;
      font-size: 40rpx;
      margin-right: 10rpx;
      margin-left: 30rpx;
      flex-basis: 5%;
    }
    
    &__search {
      flex-basis: 60%;
      width: 100%;
      height: 100%;
      
      &__box {
        width: 100%;
        height: 70%;
        padding: 10rpx 0;
        margin: 0 30rpx;
        border-radius: 60rpx 60rpx 0 60rpx;
        font-size: 24rpx;
      }
      
      &__icon {
        padding-right: 10rpx;
        margin-left: 20rpx;
        font-size: 30rpx;
      }
      
      &__text {
        // color: #AAAAAA;
      }
    }
  }
  .logo-image{
    width: 65rpx;
    height: 65rpx;
    position: relative;
    border: 1rpx solid #F8F7F8;
    border-radius: 50%;
  }
  .logo-pic{
    background-size: cover;
    background-repeat:no-repeat;
    // background-attachment:fixed;
    background-position:top;
    border-radius: 50%;
  }
  /* 自定义导航栏内容 end */
  
  /* 底部安全边距 start*/
  .tn-tabbar-height {
  	min-height: 120rpx;
  	height: calc(140rpx + env(safe-area-inset-bottom) / 2);
    height: calc(140rpx + constant(safe-area-inset-bottom));
  }
  
  .tn-message-fixed{
    position: fixed;
    background-color: rgba(255,255,255,1);
    box-shadow: 0rpx 0rpx 30rpx 0rpx rgba(0, 0, 0, 0.07);
    top: 0;
    width: 100%;
    transition: all 0.25s ease-out;
    z-index: 100;
  }
  
  
  
  /* 图标容器1 start */
  .icon1 {
    &__item {
      width: 30%;
      background-color: #FFFFFF;
      border-radius: 10rpx;
      padding: 30rpx;
      margin: 20rpx 10rpx;
      transform: scale(1);
      transition: transform 0.3s linear;
      transform-origin: center center;
      
      &--icon {
        width: 90rpx;
        height: 90rpx;
        font-size: 60rpx;
        border-radius: 50%;
        margin-bottom: 18rpx;
        position: relative;
        z-index: 1;
        
        &::after {
          content: " ";
          position: absolute;
          z-index: -1;
          width: 100%;
          height: 100%;
          left: 0;
          bottom: 0;
          border-radius: inherit;
          opacity: 1;
          transform: scale(1, 1);
          background-size: 100% 100%;
          background-image: url(https://resource.tuniaokj.com/images/cool_bg_image/icon_bg5.png);
        }
      }
    }
  }
  
  .tn-color-cat{
    color: #1D2541;
  }
  
  /* 页面阴影 start*/
  .tn-cat-shadow {
    border-radius: 15rpx;
    box-shadow: 0rpx 0rpx 50rpx 0rpx rgba(0, 0, 0, 0.07);
  }
  
  
  /* 标签*/
  .tag{
    margin: 10rpx 0 10rpx 10rpx;
    color: #7C8191;
    background-color: #F3F2F7;
    padding: 4rpx 14rpx 6rpx;
    border-radius: 10rpx;
    font-size: 20rpx;
  }
  
  /* 图标容器15 start */
  .icon15 {
    &__item {
      width: 30%;
      background-color: #FFFFFF;
      border-radius: 10rpx;
      padding: 30rpx;
      margin: 20rpx 10rpx;
      transform: scale(1);
      transition: transform 0.3s linear;
      transform-origin: center center;
      
      &--icon {
        width: 105rpx;
        height: 105rpx;
        font-size: 60rpx;
        border-radius: 50%;
        margin-bottom: 18rpx;
        position: relative;
        z-index: 1;
        
        &::after {
          content: " ";
          position: absolute;
          z-index: -1;
          width: 100%;
          height: 100%;
          left: 0;
          bottom: 0;
          border-radius: inherit;
          opacity: 1;
          transform: scale(1, 1);
          background-size: 100% 100%;
  
            
        }
      }
    }
  }
  
  /* 用户头像 start */
  .logo-image {
    width: 100rpx;
    height: 100rpx;
    position: relative;
  }
  
  .logo-pic {
    background-size: cover;
    background-repeat: no-repeat;
    // background-attachment:fixed;
    background-position: top;
    border: 1rpx solid rgba(255,255,255,0.05);
    box-shadow: 0rpx 0rpx 80rpx 0rpx rgba(0, 0, 0, 0.15);
    border-radius: 50%;
    overflow: hidden;
    // background-color: #FFFFFF;
  }
  .tn-custom-nav-bar__back {
    width: 60%;
    height: 100%;
    position: relative;
    display: flex;
    justify-content: space-evenly;
    align-items: center;
    box-sizing: border-box;
    background-color: rgba(0, 0, 0, 0.15);
    border-radius: 1000rpx;
    border: 1rpx solid rgba(255, 255, 255, 0.5);
    color: #FFFFFF;
    font-size: 18px;
    
    .icon {
      display: block;
      flex: 1;
      margin: auto;
      text-align: center;
    }
    
  }
</style>
